import React from 'react';
import {Button, Form, Input, Select, message} from 'antd';
import qs from 'qs';
import * as Constant from '../../../../common/const';
import * as Request from '../../../../Server/Upgrade';
import * as Utils from "../../../../common/utils";
import {compareIP} from "../../../../common/utils";

const FormItem = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;

class DownloadForm extends React.Component {
    constructor(props) {
        super(props);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                values.serverName = values.serverName.replace(/\s*/g,"");
                values.downloadAddress = values.downloadAddress.replace(/\s*/g,"");
                Request.downloadSaveOrEdit(qs.stringify(values)).then(res => {
                    if (Constant.REQUEST_SUCCESS == res.code) {
                        message.success(Constant.OPERATION_SUCCESS_TIP, Constant.AUTO_DISAPPEAR_TIME);
                        this.props.cancel(true);
                    }else{
                        res.code !== Constant.REQUEST_UNAUTHORIZED && message.error(res.msg,2);
                    }
                });
            }
        });
    }
    validator = (rule, value, callback) => {
        if(!value || !value.length ){
            callback();
            return;
        }
        const id = this.props.form.getFieldValue('id');
        Request.downloadValidator(qs.stringify({id:id,serverName: value})).then(res => {
            if (Constant.REQUEST_SUCCESS == res.code) {
                if (res.data) {
                    callback();
                } else {
                    callback('服务器名称已存在!');
                }
            } else {
                callback(res.msg);
            }
        })
    }

    validateIp = (value,callback,msg) => {
        if(!value || !value.length ){
            callback();
            return;
        }
        if(!Utils.checkIP(value)){
            callback(`${msg}IP格式不正确`);
            return;
        }
    }
    validateStartIp = (rule,value,callback) => {
        this.validateIp(value,callback,'起始');
        const endIp = this.props.form.getFieldValue('endIp');
        if(endIp && Utils.compareIP(value,endIp) == 1){
            callback('开始IP不能大于结束IP');
            return;
        }else{
            callback();
        }
        if(this.props.form.getFieldValue('endIp') && this.props.form.getFieldError('endIp')){
            this.props.form.validateFields(['endIp'],{ force: true });
        }
    }
    validateEndIp = (rule,value,callback) => {
        this.validateIp(value,callback,'结束');
        const startIp = this.props.form.getFieldValue('startIp');
        if(startIp && Utils.compareIP(startIp,value) == 1){
            callback('结束IP不能小于起始IP');
            return;
        }else{
            callback();
        }
        if(this.props.form.getFieldValue('startIp') && this.props.form.getFieldError('startIp')){
            this.props.form.validateFields(['startIp'],{ force: true });
        }
    }
    render() {
        const {getFieldDecorator} = this.props.form;
        const ipFormItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };

        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('id', {
                            initialValue: this.props.downloadInfo && this.props.downloadInfo.id,
                        })(
                            <Input type={'hidden'}/>
                        )}
                    </FormItem>
                    <FormItem label={'起始IP:'} {...ipFormItemLayout} >
                        {getFieldDecorator('startIp', {
                            rules: [{
                                required: true, message: '请输入起始IP!',
                            },{
                                validator: this.validateStartIp,
                            }],
                            initialValue: this.props.downloadInfo && this.props.downloadInfo.startIp,
                        })(
                            <Input maxLength={255}/>
                        )}
                    </FormItem>
                    <FormItem label={'结束IP:'} {...ipFormItemLayout} >
                        {getFieldDecorator('endIp', {
                            rules: [{
                                required: true, message: '请输入结束IP!',
                            },{
                                validator: this.validateEndIp,
                            }],
                            initialValue: this.props.downloadInfo && this.props.downloadInfo.endIp,
                        })(
                            <Input maxLength={255}/>
                        )}
                    </FormItem>
                    <FormItem label={'下载服务器地址:'} {...ipFormItemLayout} >
                        {getFieldDecorator('downloadAddress', {
                            rules: [{
                                required: true, 
                                message : '请输入下载服务器地址！'
                            }],
                            initialValue: this.props.downloadInfo && this.props.downloadInfo.downloadAddress,
                        })(
                            <Input maxLength={255}/>
                        )}
                    </FormItem>
                    <FormItem label={'服务器名称:'} {...ipFormItemLayout} >
                        {getFieldDecorator('serverName', {
                            rules: [{
                                required: true, message: '请输入服务器名称!',
                            },{
                                validator: this.validator,
                            }],
                            initialValue: this.props.downloadInfo && this.props.downloadInfo.serverName,
                        })(
                            <Input maxLength={255}/>
                        )}
                    </FormItem>
                    <FormItem {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">保存</Button>
                        <Button type="primary" onClick={this.props.cancel}>返回</Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

const RegisterDownloadForm = Form.create()(DownloadForm);
export default RegisterDownloadForm;